<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>改变样式</title>
    <style>
        .old {
            background-image: url("image/1.jpg");
            background-size: 100%;
            font-style: inherit;
            font-family: 方正粗黑宋简体;
        }
    </style>
</head>
<body>
<div id="web" style="width: 300px;height: 300px">
    <p id="sb">
    黄志峰是个大沙雕
    </p>
    <p id="cool">
        我是一个大帅逼
    </p>
    <input type="button" value="改变皮肤" id="change">
    <input type="button" value="随机一款皮肤" id="change1">
</div>

</body>
</html>
<script>
    document.getElementById("change").onclick = function () {
        /*点击改变样式*/
        let div = document.getElementById("web");
        div.style.backgroundImage = "url(image/2.jpg)";
        div.style.backgroundRepeat = "no-repeat";
        div.style.backgroundSize = "100%";
        let sb = document.getElementById("sb");
        sb.style.fontFamily = "方正粗黑宋简体";
        sb.style.fontSize = "30px";
    }
    document.getElementById("change1").onclick = function () {
        let div = document.getElementById("web");
        div.className = "old";
    }
</script>